<template>
	<view class="content">
		<view class="item">
			<view class="code">
				<text>订单编号 {{info.sn_code}}</text>
			</view>
			<view class="list">
				<text class="name">创建时间</text>
				<text>{{info.enquiry.createTime}}</text>
			</view>
			<view class="list">
				<text class="name">期望交货时间</text>
				<text>{{info.enquiry.quotation_exp_date}}</text>
			</view>
			<view class="list">
				<text class="name">收货人</text>
				<text>{{info.enquiry.consignee}}</text>
			</view>
			<view class="list">
				<text class="name">收货人电话</text>
				<text>{{info.enquiry.consignee_phone}}</text>
			</view>
			<view class="list">
				<text class="name">收货人地址</text>
				<text>{{info.enquiry.consignee_address}}</text>
			</view>
		</view>
		<view class="item">
			<view class="code iconbox">
				货物信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view v-for="g in info.goods">
				<view class="list">
					<text class="name">商品名称</text>
					<text>{{g.goods_name}}</text>
				</view>
				<view class="list">
					<text class="name">运输数量</text>
					<text>{{(g.goods_num*1).toFixed(4)}}</text>
				</view>
				<view class="list">
					<text class="name">运费单价</text>
					<text>{{g.goods_price}}</text>
				</view>
				<view class="list">
					<text class="name">运费总价</text>
					<text>{{(g.goods_num*g.goods_price).toFixed(4)}}</text>
				</view>
			</view>
		</view>
		<view class="item" v-if="info.signer_status>=2&&info.signer_status!=7">
			<view class="code iconbox">
				装货单信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="file" v-for="(url,num) in JSON.parse(info.real_url)">
				<view class="url">
					{{url}}
				</view>
				<button class="btn" @tap="previewFile(url)">查看</button>
			</view>
		</view>
		<view class="item" v-if="info.signer_status>=5&&info.signer_status!=7">
			<view class="result" >
				<text>审核信息:</text>
				<text>{{info.remark}}</text>
			</view>
		</view>
		<view class="item" v-if="info.signer_status>=4&&info.signer_status!=7">
			<view class="code iconbox">
				卸货单信息 <view class="icon iconfont icon-guanyu"></view>
			</view>
			<view class="file" v-for="(url,num) in JSON.parse(info.file_url)">
				<view class="url">
					{{url}}
				</view>
				<button class="btn" @tap="previewFile(url)">查看</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getOrderInfo
	} from '../../../network/order.js';
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	onNavigationBarButtonTap(() => {
		uni.navigateTo({
			url: './placeOrder'
		})
	})
	onLoad((res)=>{
		getDetail(res.id)
	})
	const info = reactive({})
	const getDetail = (id)=>{
		let data = {
			order_id:id
		}
		getOrderInfo(data).then(res=>{
			Object.assign(info,res.data.data)
		})
	}
	const previewFile = (url) => {
		// #ifdef  APP-PLUS
		plus.runtime.openURL(url, function(res) {});
		// #endif
	
		//#ifndef  APP-PLUS		
		window.open(url)
		//#endif
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 60rpx;

		.item {
			margin: 20rpx 0;
			background-color: #fff;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			position: relative;

			.code {
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #333;

				.status {
					font-size: 28rpx;
				}
				
			}
			.iconbox{
				justify-content:flex-start;
				gap: 10rpx;
				.icon{
					font-size: 40rpx;
					color: #ff6700;
				}
			}

			.list {
				width: 100%;
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #333;

				.name {
					display: inline-block;
					width: 180rpx;
					text-align: right;
					margin-right: 30rpx;
				}
			}

			.goodslist {
				width: 100%;
				margin-top: 20rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #333;
				display: flex;
				justify-content: space-between;

				.name {
					width: 180rpx;
					text-align: right;
					text-align: center;
				}
			}
			.file {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 0;
			
				.url {
					width: 500rpx;
					font-size: 24rpx;
					color: #f6bf00;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			
				.btn {
					width: 120rpx;
					height: 60rpx;
					font-size: 24rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #f6bf00;
					margin: 0;
				}
			}
			.result{
				font-size: 28rpx;
				display: flex;
				justify-content: flex-start;
				gap: 60rpx;
			}
		}
	}
</style>